<%@ page import="java.io.PrintWriter" %>
<%@ page import="com.google.gson.JsonObject" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="org.addressBook.service.TbUserService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <script src="js/jQuery.min.js"></script>
    <script src="js/layui.js"></script>
    <script src="js/element.js"></script>
    <script src="js/manage.js"></script>
    <script src="js/carousel.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/laydate.css">
    <link rel="stylesheet" href="css/manage.css">
</head>

<body class="layui-layout-body">
<%--<%
    String userName = (String) request.getSession().getAttribute("name");
    JsonObject json = null;
    TbUserService us = new TbUserService();

/**
 * 当客户端调用此接口时，先进行数据查找，由于是自己查找数据表，所以需要查找数据表里面的全部的值
 * 把获得的记录转换为json类型，在查询的时候已经实现
 */
    try {
        json = us.jsonService(userName); //
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    }
    out.print(json);
%>--%>
<form class="infoTable" action="updatePersonInfo" method="post">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">校友录管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">用户管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javaScript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <%String name = (String) request.getSession().getAttribute("name");%>
                    <%=name%>
                </a>
                <!-- <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                <span class="uname">admin</span> -->
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="login.jsp" style="color: red;">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed ">
                    <a class="" href="javascript:;">校友录</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">相册</a>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">基本资料</a></li>
                <li class="layui-nav-item"><a href="javascript:;">备忘录</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!-- 校友录模块 -->
        <div class='bodyContent1 currentContent'>
            <div class="demoTable">
                搜索用户：
                <div class="layui-inline">
                    <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
               <%-- <input type="submit" value="保存" class="submit">--%>
                <%--<form class="layui-form">
                    <input type="hidden" name="id" />
                    <button class="layui-btn layui-btn-sto" type="submit" id="btnSave" lay-filter="btnSave" lay-submit>
                        保存
                    </button>
                </form>--%>
            </div>

            <table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-mini" lay-event="save">保存</a>
            </script>

        </div>
        <!-- 相册模块 -->
        <div class="bodyContent2">
            <div class="slideShow">
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        <div><img src="img/pic.jpg" alt=""></div>
                        <div><img src="img/pic1.jpg" alt=""></div>
                        <div><img src="img/pic.jpg" alt=""></div>
                        <div><img src="img/pic.jpg" alt=""></div>
                        <div><img src="img/pic.jpg" alt=""></div>
                        <div><img src="img/pic.jpg" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="info">
                <div class="photo">校园</div>
                <div class="photo">活动</div>
                <div class="photo">聚餐</div>
                <div class="photo">宿舍</div>
                <div class="photo">社团</div>
                <div class="photo">课堂</div>
            </div>
        </div>
        <!-- 基本资料模块 -->
        <div class="bodyContent3">
            <div class="infomation">
                <div class="inofTop">
                    <div class="leftCollum"></div>
                    个人信息
                </div>

                    <table>
                        <tr>
                            <td>用户名：</td>
                            <td><input type="text" name="newName" class="username"></td>
                        </tr>
                        <tr>
                            <td>出生日期：</td>
                            <td>
                                <input type="date" id="date_info" placeholder="请输入日期">
                            </td>
                        </tr>
                        <tr>
                            <td>修改密码：</td>
                            <td><input type="password" name="password" class="oldpwd"></td>
                        </tr>
                        <tr>
                            <td>确认密码：</td>
                            <td><input type="password" class="newpwd"><span class='pwdJudge'></span></td>
                        </tr>
                        <tr>
                            <td>邮箱：</td>
                            <td><input type="email" name="mail" id="newEmail"></td>
                        </tr>
                        <tr>
                            <td>座右铭：</td>
                            <td><textarea name="" id="" cols="38" rows="5"></textarea></td>
                        </tr>
                    </table>
                    <input class="save" type="submit" value="保存"></input>
            </div>
        </div>
        <div>记录在校期间的生活</div>
        <div>内容5</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</form>
<script src="./layui/layui.all.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            height: '350px',
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    layui.use('table', function () {
        var table = layui.table;

        //展示已知数据
        table.render({
            elem: '#LAY_table_user',

            url:'manage',
            /* url: 'UVServlet', */
            height: 500,
            cols: [
                [ //标题栏
                    {
                        checkbox: true,
                        LAY_CHECKED: true
                    } //默认全选
                    , /*{
                    field: 'id',
                    title: 'ID',
                    width: 80,
                    sort: true
                },*/ {
                    field: 'name',
                    title: '姓名',
                    width: 120
                }, {
                    field: 'gender',
                    title: '性别',
                    width: 80
                }, {
                    field: 'mail',
                    title: '邮箱',
                    width: 230
                }, {
                    field: 'phone',
                    title: '号码',
                    width: 200
                },{
                    field: 'address',
                    title: '城市',
                    width: 200
                },{
                    field: 'right',
                    title: '操作',
                    width: 350,
                    toolbar: "#barDemo"
                }
                ]
            ],
            skin: 'row' //表格风格
            ,
            even: true,
            page: true //是否显示分页
            ,
            limits: [5, 7, 10],
            limit: 10 //每页默认显示的数量
        });
        var $ = layui.$,
            active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    table.reload('testReload', {
                        where: {
                            keyword: demoReload.val()
                        }
                    });
                }
            };
        /* 搜索功能 */
        /*var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                table.reload('testReload', {
                    where: {
                        keyword: demoReload.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? console.log(active[type].call(this)): '';
        });*/

        axios.defaults.headers.post["Content-Type"] = "application/json";

        table.on('tool(useruv)', async function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                // layer.msg('ID：' + data.id + ' 的查看操作');
                layer.alert(' 姓名：' + data.name + '</br>性别：' + data.gender + '</br>地址：' + data
                    .address)
            } else if (obj.event === 'del') {
                layer.confirm('是否确定删除', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'save') {
                var newData = obj.data;
                console.log(newData);
                let res = await axios.post('http://localhost:9002/saveTable',newData);
            }
            else if (obj.event === 'edit') {
/*                layer.alert('编辑行：<br>' + JSON.stringify(data))*/
                function ShowElement(element) {
                    var oldhtml = element.innerHTML;
                    //如果已经双击过，内容已经存在input，不做任何操作
                    if (oldhtml.indexOf('type="text"') > 0) {
                        return;
                    }
                    let num = element.outerHTML.substring(47,48);
                    switch(num){
                        case '1':obj.data.name=oldhtml;break;
                        case '2':obj.data.gender=oldhtml;break;
                        case '3':obj.data.mail=oldhtml;break;
                        case '4':obj.data.phone=oldhtml;break;
                        case '5':obj.data.address=oldhtml;break;
                    }
                    //创建新的input元素
                    var newobj = document.createElement('input');
                    //为新增元素添加类型
                    newobj.type = 'text';
                    //为新增元素添加value值
                    newobj.value = oldhtml;
                    //为新增元素添加光标离开事件
                    newobj.onblur = function () {
                        //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
                        if (this.value && this.value.trim() !== "") {
                            element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
                        } else {
                            element.innerHTML = oldhtml;
                        }
                    }
                    //设置该标签的子节点为空
                    element.innerHTML = '';
                    //添加该标签的子节点，input对象
                    element.appendChild(newobj);
                    //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
                    newobj.setSelectionRange(0, oldhtml.length);
                    //设置获得光标
                    newobj.focus();
                }

                var td = document.querySelectorAll('.layui-table-cell');
                for (var i = 0; i < td.length; i++) {
                    td[i].addEventListener('dblclick', function () {
                        ShowElement(this);
                    })

                };
            }
        });

        form.on('submit(btnSave)', function (data) {
            console.info('开始保存');
            // * 按钮禁用
            var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
            if (isDisabled) {
                return false;
            }

            // * 整合表单数据
            var formData = data.field;
            $.extend(formData, { Id: $("#hiddenId").val() });
            console.info(formData);

            // * 确定路径
            var url = "saveTable";
            if (editMode == "add") {
                url = urlEnum.Add;
            } else if (editMode == "update") {
                url = urlEnum.Update;
            } else {
                alert('编辑模型不确定, add / update');
                return;
            }

            // * 发起请求
            $.ajax({
                data: formData,
                type: "POST",
                dataType: "JSON",
                url: url,
                beforeSend: function () {
                    // 禁用
                    $("#btnSave").addClass('layui-btn-disabled');
                },
                complete: function () {
                    // 启用
                    $("#btnSave").removeClass('layui-btn-disabled');
                },
                success: function (result) {
                    console.info("保存数据成功，返回的数据为：↓ ");
                    console.info(result);

                    if (result.Status) {
                        // 刷新列表
                        parent.$("#mainGrid").bootstrapTable("selectPage", 1);

                        // 确保在最后关闭窗体
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        // 提示失败
                        layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
                    }
                }
            }); // end ajax

            return false;
        });
    });
</script>
</body>

</html>
